<template>
    <div class="shop-container">
        <ul class="shop-list" >
            <li class="shop-list-item">
                <img src="./../../imgs/shop_list/shop_item.png" alt="" width="100%">
                <h4 class="list-item-title">【糖蜜】整条刺绣名族风围巾女士秋冬季中年妈妈羊绒羊毛披肩保暖</h4>
                <div class="list-item-bottom">
                    <span class="item-price">¥30.5</span>
                    <span class="item-counter">已拼5345件</span>
                    <span class="item-user">
                        <img src="./../../imgs/shop_list/user1.jpg" alt="">
                        <img src="./../../imgs/shop_list/user2.jpg" alt="">
                    </span>
                    <span class="item-buy">
                        <button>去拼单 ></button>
                    </span>
                </div>
            </li>
            <li class="shop-list-item">
                <img src="./../../imgs/shop_list/shop_item.png" alt="" width="100%">
                <h4 class="list-item-title">【糖蜜】整条刺绣名族风围巾女士秋冬季中年妈妈羊绒羊毛披肩保暖</h4>
                <div class="list-item-bottom">
                    <span class="item-price">¥30.5</span>
                    <span class="item-counter">已拼5345件</span>
                    <span class="item-user">
                        <img src="./../../imgs/shop_list/user1.jpg" alt="">
                        <img src="./../../imgs/shop_list/user2.jpg" alt="">
                    </span>
                    <span class="item-buy">
                        <button>去拼单 ></button>
                    </span>
                </div>
            </li>
            <li class="shop-list-item">
                <img src="./../../imgs/shop_list/shop_item.png" alt="" width="100%">
                <h4 class="list-item-title">【糖蜜】整条刺绣名族风围巾女士秋冬季中年妈妈羊绒羊毛披肩保暖</h4>
                <div class="list-item-bottom">
                    <span class="item-price">¥30.5</span>
                    <span class="item-counter">已拼5345件</span>
                    <span class="item-user">
                        <img src="./../../imgs/shop_list/user1.jpg" alt="">
                        <img src="./../../imgs/shop_list/user2.jpg" alt="">
                    </span>
                    <span class="item-buy">
                        <button>去拼单 ></button>
                    </span>
                </div>
            </li>
            <li class="shop-list-item">
                <img src="./../../imgs/shop_list/shop_item.png" alt="" width="100%">
                <h4 class="list-item-title">【糖蜜】整条刺绣名族风围巾女士秋冬季中年妈妈羊绒羊毛披肩保暖</h4>
                <div class="list-item-bottom">
                    <span class="item-price">¥30.5</span>
                    <span class="item-counter">已拼5345件</span>
                    <span class="item-user">
                        <img src="./../../imgs/shop_list/user1.jpg" alt="">
                        <img src="./../../imgs/shop_list/user2.jpg" alt="">
                    </span>
                    <span class="item-buy">
                        <button>去拼单 ></button>
                    </span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {

    }
  },
  components: {

  }
}
</script>

<style scoped lang="stylus">
.shop-container
    margin-bottom 10px
    width 100%
    background-color #f5f5f5
    .shop-list
        .shop-list-item
            background-color #fff
            display flex
            flex-direction column
            justify-content center
            align-items center
            margin-bottom 10px
            padding 0 10px
            .list-item-title
                color #666
                margin 20px 0
                line-height 20px
                overflow hidden
            .list-item-bottom
                width 100%
                padding 10px 0
                display flex
                flex-direction row
                justify-content space-around
                align-items center
                .item-price
                    font-size 20px
                    color red
                    font-weight bold
                    flex 1
                .item-counter
                    flex 2
                    color #ccc
                    font-size 12px
                    line-height 20px
                .item-user
                    flex 1
                    img 
                        width 25px
                        border-radius 50%
                    img:last-child
                        margin-left -10px
                        
                .item-buy
                    flex 2
                    background-color red
                    border none 
                    border-radius 4px
                    padding 5px 0
                    text-align center
                    
                    button
                        color #fff
                        font-size 14px
                        text-align center

                
    
                        



</style>
